<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('修改参数')"/>
  <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
  <form class="form-horizontal m" id="form-config-edit" th:object="${dataSource}">
    <input id="id" name="id" th:field="*{id}" type="hidden">
    <div class="form-group">
      <label class="col-sm-3 control-label">数据库名称：</label>
      <div class="col-sm-8">
        <input id="name" name="name" th:field="*{name}" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">数据库类型：</label>
      <div class="col-sm-8">
        <select name="dbType" class="form-control" th:with="type=${@dict.getType('sys_db_type')}">
          <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
                  th:field="*{dbType}"></option>
        </select>
      </div>
    </div>
    <div class="form-group oracle" th:style="'display:' + ${dataSource.dbType == 'oracle' ? 'block' : 'none'}">
      <label class="col-sm-3 control-label">连接方式：</label>
      <div class="col-sm-8">
        <div class="radio-box" th:each="dict : ${@dict.getType('sys_oracle_mode')}">
          <input type="radio" th:id="${dict.dictCode}" name="oracleConnMode" th:value="${dict.dictValue}"
                 th:checked="${dataSource.oracleConnMode == dict.dictValue || dict.default}">
          <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
        </div>
      </div>
    </div>
    <div class="form-group oracle" th:style="'display:' + ${dataSource.dbType == 'oracle' ? 'block' : 'none'}">
      <label class="col-sm-3 control-label">服务名或者SID：</label>
      <div class="col-sm-8">
        <input id="serviceNameOrSid" name="serviceNameOrSid" th:field="*{serviceNameOrSid}" class="form-control"
               type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">主机地址：</label>
      <div class="col-sm-8">
        <input id="host" name="host" th:field="*{host}" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">主机端口：</label>
      <div class="col-sm-8">
        <input id="port" name="port" th:field="*{port}" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">用户名：</label>
      <div class="col-sm-8">
        <input id="username" name="username" th:field="*{username}" class="form-control" type="text" required>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">密码：</label>
      <div class="col-sm-8">
        <input id="password" name="password" th:field="*{password}" class="form-control" type="text">
      </div>
    </div>
  </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script type="text/javascript">
  var prefix = ctx + "system/dataSource";

  $("#form-config-edit").validate({
    onkeyup: false,
    focusCleanup: true
  });
  $('select[name="dbType"]').on("select2:select", function () {
    var data = $(this).val();
    if (data == 'oracle') {
      $('.oracle').show();
    } else {
      $('.oracle').hide();
    }
  });

  /*测试连接是否可用*/
  function connectHandler() {
    if ($.validate.form()) {
      $.operate.save(prefix + "/save", $('#form-config-edit').serialize());
    }
  }

  function submitHandler() {
    if ($.validate.form()) {
      var url = prefix + "/connect";
      var data = $('#form-config-edit').serialize();
      //先测试连接是否可用
      var config = {
        url: url,
        type: "post",
        dataType: "json",
        data: data,
        beforeSend: function () {
          $.modal.loading("正在测试连接中，请稍后...");
        },
        success: function (result) {
          if (result.code == web_status.SUCCESS) {
            $.operate.save(prefix + "/save", data);
          } else {
            $.modal.closeLoading();
            $.modal.alertWarning(result.msg)
          }
        }
      };
      $.ajax(config)
    }
  }
</script>
</body>
</html>
